<template>
	<van-sticky>
		<div class="searchBox">
			<van-icon name="arrow-left" size="26" @click="goback" />
			<div class="title">启动配置</div>
		</div>
	</van-sticky>
	<div class="user-box">
		<div style="padding: 0 8px" v-for="(item,index) in data" :key="index">
			<div class="grid-content2">
				<div>
					<div class="grid-content-top-pic">
						<div class="flex">
							<div>
								<img class="imgage" src="../../../assets/images/shebei.png" alt="">
							</div>
							<div style="margin-left: 10px; font-size: 12px;">
								{{ item.deviceName }}
							</div>
						</div>
						<div class="grid-content-top-pic-right">
							<van-tag v-if="item.deviceStatus === 0" type="success" size="large">在线</van-tag>
							<van-tag v-else type="danger" size="large">离线</van-tag>
						</div>
					</div>
					<div class="grid-content-top-dec">
						<p class="grid-content-top-dec-p">
							<span class="grid-content-top-dec-span">店铺：{{ item.providerName }}</span>
							<span class="grid-content-top-dec-span">创建日期：{{ item.createTime }}</span>
						</p>
						<p class="grid-content-top-dec-p">
							<span class="grid-content-top-dec-span">地址：{{ item.detailedAddress }}</span>
						</p>
					</div>
				</div>
			</div>
		</div>
		<!-- <div style="padding: 0 10px">
			<div class="grid-content bg-purple">
				<div class="grid-content-top">
					<div class="grid-content-top-pic">
						<div class="grid-content-top-pic-left">
							<div>
								<img class="imgage" src="../../../assets/images/shebei.png" alt="">
							</div>
							<div style="margin-left: 10px; font-size: 12px">
								<p>测试设备2</p>
							</div>
						</div>
						<div class="grid-content-top-pic-right">
							<p class="towerUnits">1台</p>
						</div>
					</div>
					<div class="grid-content-top-dec">
						<p style="color: #939393;">
							<span>编号：123</span>
							<span>地址：123</span>
						</p>
					</div>
				</div>
			</div>
		</div> -->
		<!-- 设置金额 -->
		<div style="padding: 0 8px;margin-top: 20px;">
			<div class="rechargeBox">
				<ul class="rechargebetween" v-for="(item,index) in list" :key="index">
					<li>
						<span>{{ item.amount }}元 = {{ item.coin }}币</span>
					</li>
					<li class="flex">
						<div class="flex">
							<van-icon name="edit" color="#444" size="18" />
							<span @click="updateparams(item)">编辑</span>
						</div>
						<div class="flex" style="margin-left: 20px;">
							<van-icon name="delete" color="#444" size="18" />
							<span @click="deletes(item)">删除</span>
						</div>
					</li>
				</ul>
				<ul class="flexbetween" style="margin-top: 10px;">
					<li class="addZi" @click="addshowkai">
						<van-icon name="plus" />
						<span>添加</span>
					</li>
					<li class="addZi" @click="defaultSettings">恢复默认设置</li>
				</ul>
			</div>
		</div>
		<!-- 弹窗 -->
		<van-dialog v-model:show="deleteshow" title="提示" show-cancel-button @confirm="deleteConfirm"
			@cancel="deleteCancel" :keyboard-enabled="false">
			<div class="prompt">确定要删除该配置吗?</div>
		</van-dialog>
		<!-- 添加 -->
		<van-dialog v-model:show="addshow" :title="title" :showConfirmButton="false" :keyboard-enabled="false">
			<van-form @submit="onSubmit" input-align="right" error-message-align="right" ref="formRef">
				<van-cell-group inset>
					<van-field v-model="form.amount" name="amount" label="价格" placeholder="请输入价格" type="number"
						 :min="0.01"  @blur="amountblur" :rules="[{ required: true, message: '请输入价格' }]" />
					<van-field name="coin" label="币数"  @change="coinblur" :rules="[{ required: true, message: '请输入币数' },]">
						<template #input>
							<van-stepper v-model="form.coin" integer input-width="36px" :max="200"/>
						</template>
					</van-field>
				</van-cell-group>
				<div style="margin: 16px 0;" class="flexaround">
					<van-button round block type="default" @click="handleReset" style="width: 40%">取消</van-button>
					<van-button round block type="primary" native-type="submit" style="width: 40%">提交</van-button>
				</div>
			</van-form>
		</van-dialog>
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from "vue";
	import {
		useRoute
	} from 'vue-router';
	import {
		showToast,
		showConfirmDialog
	} from 'vant';
	import {
		deviceRechargeConfigList,
		deviceRechargeConfigInsert,
		deviceRechargeConfigUpdate,
		deviceRechargeConfigDelete,
		deviceRechargeResetConfig
	} from '@/api/deviceRechargeConfig';
	const route = useRoute();
	const data = ref([]);
	const list = ref([]);
	const deleteshow = ref(false);
	const addshow = ref(false);
	// 删除参数
	const deleteParams = ref({
		id: ''
	});
	const form = ref({
		deviceId: '',
		coin: 1,
		amount: 1
	})
	const title = ref('');
	const updateshow = ref(false);
	onMounted(() => {
		getdata();
	});

	const getdata = async () => {
		const params = {
			deviceId: route.params.deviceId
		};
		data.value = [JSON.parse(route.params.data)]
		try {
			const response = await deviceRechargeConfigList(params);
			list.value = response.data || [];
		} catch (err) {
			showToast({
				type: 'fail',
				message: err.desc || "获取数据失败",
				forbidClick: true,
				duration: 1000
			});
		}
	};
	// 删除配置
	const deletes = (item) => {
		deleteParams.value.id = item.id
		deleteshow.value = true;
	};

	const deleteConfirm = async () => {
		try {
			const response = await deviceRechargeConfigDelete(deleteParams.value);
			if (response.status == 200) {
				showToast({
					type: 'success',
					message: '删除成功',
					forbidClick: true,
					duration: 1000
				});
			} else {
				showToast({
					type: 'fail',
					message: response.desc || '删除失败',
					forbidClick: true,
					duration: 1000
				});
			}
		} catch (err) {
			showToast({
				type: 'fail',
				message: err.desc || '删除失败',
				forbidClick: true,
				duration: 1000
			});
		} finally {
			setTimeout(() => {
				getdata();
			}, 1000)
		}
	};

	const deleteCancel = () => {
		deleteParams.value.id = ''
	};
	const updateparams = (item) => {
		form.value = {
			deviceId: item.id,
			coin: item.coin,
			amount: item.amount
		};
		title.value = '编辑兑币数量';
		updateshow.value = true;
		addshow.value = true;
	};
	// 添加
	const addshowkai = () => {
		title.value = '添加兑币数量';
		updateshow.value = false;
		form.value = {
			deviceId: route.params.deviceId,
			coin: 1,
			amount: 1
		};
		addshow.value = true;
	};
	// 表单引用
	const formRef = ref(null);

	// 金额失去焦点
	const amountblur = () => {
		if(form.value.amount > 200){
			form.value.amount = 1
			showToast({
				type: 'fail',
				message: '配置最大金额不能大于200',
				forbidClick: true,
				duration: 1000
			});
		}
	};

	// 币数失去焦点
	const coinblur = () => {
		if(form.value.coin > 200){
			form.value.coin = 1
			showToast({
				type: 'fail',
				message: '配置最大币数不能大于200',
				forbidClick: true,
				duration: 1000
			});
		}
	}

	// 提交处理
	const onSubmit = async () => {
		//console.log(updateshow.value)
		// 新增
		if(form.value.amount > 200){
			return;
		}
		if(form.value.coin > 200){
			return;
		}
		if (updateshow.value == false) {
			try {
				// 先进行表单验证
				await formRef.value.validate();
				const response = await deviceRechargeConfigInsert(form.value);

				if (response.status == 200) {
					showToast({
						type: 'success',
						message: '添加成功',
						forbidClick: true,
						duration: 1000
					});
					setTimeout(() => {
						handleReset();
						getdata();
					}, 1000)
				} else {
					showToast({
						type: 'fail',
						message: response.desc || '添加失败',
						forbidClick: true,
						duration: 1000
					});
				}
			} catch (error) {
				showToast({
					type: 'fail',
					message: error.desc || '添加失败',
					forbidClick: true,
					duration: 1000
				});
			}
		} else {
			try {
				// 先进行表单验证
				await formRef.value.validate();
				const parmas = {
					id: form.value.deviceId,
					coin: form.value.coin,
					amount: form.value.amount
				};
				const response = await deviceRechargeConfigUpdate(parmas);

				if (response.status == 200) {
					showToast({
						type: 'success',
						message: '编辑成功',
						forbidClick: true,
						duration: 1000
					});
					setTimeout(() => {
						handleReset();
						getdata();
					}, 1000)
				} else {
					showToast({
						type: 'fail',
						message: response.desc || '编辑失败',
						forbidClick: true,
						duration: 1000
					});
				}
			} catch (error) {
				showToast({
					type: 'fail',
					message: error.desc || '编辑失败',
					forbidClick: true,
					duration: 1000
				});
			}
		}
	};

	// 重置表单
	const handleReset = () => {
		formRef.value.resetValidation(); // 清除验证提示
		form.value = {
			deviceId: '',
			coin: 1,
			amount: 1
		};
		addshow.value = false;
	};
	// 返回
	const goback = () => {
		window.history.back();
	};
	// 恢复默认设置
	const defaultSettings = async () => {
		showConfirmDialog({
			title: '提示',
			message: '您确定要恢复默认设置吗？',
		}).then(async () => {
			// on confirm
			try {
				const parmas = {
					storeId: JSON.parse(route.params.data).storeId,
				};
				const response = await deviceRechargeResetConfig(parmas);

				if (response.status == 200) {
					showToast({
						type: 'success',
						message: '恢复成功',
						forbidClick: true,
						duration: 1000
					});
				} else {
					showToast({
						type: 'fail',
						message: response.desc || '恢复失败',
						forbidClick: true,
						duration: 1000
					});
				}
			} catch (error) {
				showToast({
					type: 'fail',
					message: error.desc || '恢复失败',
					forbidClick: true,
					duration: 1000
				});
			} finally {
				setTimeout(() => {
					getdata();
				}, 1000)
			}
		}).catch(() => {
			// on cancel
		});
	};
</script>

<style lang="scss" scoped>
	.flexbetween {
		display: flex;
		align-items: center;
		align-content: center;
		justify-content: space-between;
	}

	.flexaround {
		display: flex;
		align-items: center;
		align-content: center;
		justify-content: space-around;
	}

	.flex {
		display: flex;
		align-items: center;
		align-content: center;
	}

	.user-box {
		width: 100%;
		height: 100%;
		padding: 0;

		.grid-content {
			border: 1px solid #c1c5cd;
			border-radius: 10px;
			margin-top: 20px;
			background-color: white;

			.grid-content-top {
				width: 100%;
				// border-bottom: 1px solid #c1c5cd;

				.grid-content-top-dec {
					padding: 0 10px;

					p {
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: 12px;

						span {
							width: 50%;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
				}

				.grid-content-top-pic {
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 100%;
					padding: 10px;
					box-sizing: border-box;

					div {
						.imgage {
							width: 58px;
							height: 58px;
							border-radius: 10px;
						}
					}

					.grid-content-top-pic-left {
						display: flex;
						align-items: center;
					}

					.grid-content-top-pic-right {
						.pic {
							width: 30px;
							height: 30px;
							vertical-align: top;
						}
					}
				}
			}
		}
	}

	.towerUnits {
		background-color: #F0473B;
		color: #FFF;
		padding: 0 10px;
		border-radius: 20px;
		height: 25px;
		line-height: 25px;
		margin: 0;
	}

	.searchBox {
		background-color: #fff;
		height: 44px;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 0 6px;

		.title {
			text-align: center;
			color: #000;
			font-weight: bold;
			box-sizing: border-box;
			height: 44px;
			flex: 0.9;
			line-height: 44px;
		}
	}

	.rechargeBox {
		background-color: #FFF;
		box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.1);
		box-sizing: border-box;
		padding: 10px;
		border-radius: 10px;
		font-size: 15px;
		color: #5C5656;

		.rechargebetween {
			display: flex;
			align-items: center;
			align-content: center;
			justify-content: space-between;
			padding: 8px 0;
			border-bottom: 1px solid #C0C0C0;
		}

		.addZi {
			color: rgb(81, 164, 208);
			font-size: 15px;
			cursor: pointer;
		}
	}

	.prompt {
		margin: 8px 0;
		text-align: center;
	}

	.grid-content2 {
		border: 1px solid #c1c5cd;
		border-radius: 10px;
		margin-top: 20px;
		background-color: white;

		.grid-content-top-dec {
			padding: 0 10px;

			.grid-content-top-dec-p {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 12px;
				margin-top: 0;

				.grid-content-top-dec-span {
					width: 50%;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}

		.grid-content-top-pic {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			padding: 10px;
			box-sizing: border-box;

			.imgage {
				width: 58px;
				height: 58px;
				border-radius: 10px;
			}

			.grid-content-top-pic-right {
				margin-left: 10px;
				font-size: 12px;
			}
		}

		.grid-content-bottom {
			display: flex;
			align-items: center;
			align-content: center;
			justify-content: space-around;
			padding: 0 10px;
			width: 100%;
			font-size: 12px;
			color: rgb(81, 164, 208);
			box-sizing: border-box;

			p {
				cursor: pointer;
			}
		}
	}
</style>
